<template>
    <div class="historyData">
        <div class="boxTitle">
            <img src="@/assets/images/home/rightIcon.png" alt="">
            <span class="title">历史数据统计</span>
        </div>
        <div class="content">
            <div class="quest">
                <div class="quest_content">
                    <img class="realTime_icon" src="@/assets/images/dailyMaintenance/realTime_icon.png" alt="">
                    <span>巡检任务总数：</span><span class="quest_num">280</span>
                </div>
                <div class="nav_time">
                    <span class="time_item" :class="{ 'time_active': navIndex == 0 }" @click="changeIndex(0)">近7日</span>
                    <span class="time_item" :class="{ 'time_active': navIndex == 1 }"
                        @click="changeIndex(1)">近30日</span>
                    <span class="time_item" :class="{ 'time_active': navIndex == 2 }" @click="changeIndex(2)">近1年</span>
                </div>
            </div>
            <div class="statistics">
                <div class="statistics_title">
                    <img class="historyData_icon" src="@/assets/images/dailyMaintenance/historyData_icon.png" alt="">
                    <span>巡检结果统计</span>
                </div>
                <div class="percent">
                    <div class="percent_text">
                        <span class="text_item">正常(80%)</span>
                        <span class="text_item">异常(20%)</span>
                    </div>
                    <div class="percent_content">
                        <div class="percent_item percent_normal" :style="{ flex: percent_normal }"></div>
                        <div class="percent_item percent_abnormal" :style="{ flex: percent_abnormal }"></div>
                    </div>
                </div>
                <lineChart :data="chartData.data"></lineChart>
            </div>
            <div class="statistics">
                <div class="statistics_title">
                    <img class="historyData_icon" src="@/assets/images/dailyMaintenance/historyData_icon.png" alt="">
                    <span>各班组任务完成情况</span>
                </div>
                <div class="inspected">已巡检任务数(占比)</div>
                <pieChart_teamGroup :data="chartData.data2"></pieChart_teamGroup>
            </div>
            <div class="statistics">
                <div class="statistics_title">
                    <img class="historyData_icon" src="@/assets/images/dailyMaintenance/historyData_icon.png" alt="">
                    <span>任务完成率</span>
                </div>
                <lineChart :data="chartData.data"></lineChart>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import lineChart from './lineChart.vue';
import pieChart_teamGroup from './pieChart_teamGroup.vue';
let navIndex = ref(0);

//改变时间范围筛选
const changeIndex = (index: number) => {
    if (navIndex.value != index) {
        navIndex.value = index;
    }
}

const percent_normal = computed(() => {
    return 80
});
const percent_abnormal = computed(() => {
    return 20
});

const chartData = reactive({
    data: [
        { date: '10/01', value: 50 },
        { date: '10/02', value: 60 },
        { date: '10/03', value: 70 },
        { date: '10/04', value: 30 },
        { date: '10/05', value: 40 },
        { date: '10/06', value: 80 },
        { date: '10/07', value: 60 },
    ] as any,
    data2:[
    { value: '10', name: '班组A' },
    { value: "25", name: '班组B' },
    { value: "33", name: '班组C' },
    { value: "28", name: '班组D' },
    ]
})
</script>

<style lang="scss" scoped>
.historyData {
    position: absolute;
    z-index: 999;
    background: url(@/assets/images/dailyMaintenance/r-bg-01.png) no-repeat;
    background-size: 100% 100%;
    right: vh(21);
    top: vh(61);
    width: vh(421);
    height: vh(909);
    font-size: vh(14);
    color: #FFFFFF;

    .content {
        padding: vh(7) vh(16);

        .quest {
            display: flex;
            line-height: 1;
            padding-bottom: vh(12);
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            align-items: center;

            .quest_content {
                flex: 1;

                .realTime_icon {
                    margin-right: vh(4);
                }

                .quest_num {
                    font-family: DIN;
                    font-weight: 400;
                    font-size: vh(18);
                    color: #FFAC00;
                }
            }

            .nav_time {
                display: flex;

                .time_item {
                    width: vh(52);
                    height: vh(19);
                    display: inline-block;
                    background: rgba(0, 227, 254, 0.2);
                    border-radius: vh(4);
                    margin-left: vh(10);
                    line-height: vh(19);
                    text-align: center;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    font-size: vh(12);
                    color: #94BCC4;
                    cursor: pointer;

                    &.time_active {
                        border: 1px solid #00E3FE;
                        color: #00D6FF;
                    }
                }
            }
        }

        .statistics {
            padding-top: vh(14);

            .statistics_title {
                // display: flex;
                // align-items: center;
                font-family: Source Han Sans CN;
                font-weight: 500;
                font-size: vh(14);
                color: #FFFFFF;
                line-height: 1;

                .historyData_icon {
                    margin-right: vh(10);
                    vertical-align: sub;
                }
            }

            .percent {
                margin-top: vh(22);

                .percent_text {
                    display: flex;
                    justify-content: space-between;
                }

                .percent_content {
                    width: 100%;
                    display: flex;

                    .percent_normal {
                        // flex: 80;
                        height: vh(6);
                        background: #00C0FF;
                        border-radius: vh(3) 0 0 vh(3);
                    }

                    .percent_abnormal {
                        // flex: 20;
                        height: vh(6);
                        background: #CFA972;
                        border-radius: 0 vh(3) vh(3) 0;
                    }
                }
            }

            .inspected {
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: vh(12);
                color: #00B1CD;
                margin-top: vh(14);
            }
        }
    }
}
</style>
